<html>
  <head>
	<title>CBCS Employee Survey 2015</title>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Tangerine:400,700">
	<style>
	.ss-form-title {
	  font-family: "Tangerine";
	  color: rgb(86,42,8);
	  font-weight: 700;
	  font-size: 2.460rem;
	  font-style: normal;
	  text-align: center;
	}
	.ss-q-title {
	  font-family: "Roboto Slab";
	  color: rgb(86,42,8);
	  font-weight: 700;
	  font-size: 1.080rem;
	  font-style: normal;
	}
	</style>
    <script type="text/javascript">

	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {'packages':['corechart']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(layoutReport);

	// Callback function that initiates the report layout 
	function layoutReport() {
		//var url = 'https://docs.google.com/spreadsheets/d/1ztEBH3dxd_5SE1tM_u_4z7CAdtWZgiLdIO4e_WCVXw4/gviz/tq?gid=879738649&header=1&range=A3:F3';
		// Ranges (all, Upper School, Grammar, EC, Staff, Dept Head)
		//var ranges = ["A2:BS7", "A11:BS16", "A20:BS25", "A29:BS34", "A38:BS43", "A47:BS52"];
		//Console.debug(ranges[dept]);
		//var range = ranges[dept];
		//var range;
		//switch (dept) {
		//	case 0: range="A1:R12"; break;
		//	case 1: range="A11:BS16"; break;
		//	case 2: range="A20:BS25"; break;
		//	case 3: range="A29:BS34"; break;
		//	case 4: range="A38:BS43"; break;
		//	case 5: range="A47:BS52"; break;
		//}
		/******
		// Multiple question survey
		var range = 'A2:BT7';
		var sheet = '1770803386';
		var url = 'https://docs.google.com/spreadsheets/d/1ztEBH3dxd_5SE1tM_u_4z7CAdtWZgiLdIO4e_WCVXw4/gviz/tq?gid=' + sheet + '&header=1&range=' + range;
		var query = new google.visualization.Query(url);
		query.send(handleQuestionQueryResponse);
		*******/
		
		// Priority question 1
		range = 'A1:H8';
		sheet = '901400552';
		url = 'https://docs.google.com/spreadsheets/d/1ztEBH3dxd_5SE1tM_u_4z7CAdtWZgiLdIO4e_WCVXw4/gviz/tq?gid=' + sheet + '&header=1&range=' + range;

		query = new google.visualization.Query(url);
		query.send(handlePriorityQueryResponse);
		
		// Priority question 2
		range = 'A10:J19';
		sheet = '901400552';
		url = 'https://docs.google.com/spreadsheets/d/1ztEBH3dxd_5SE1tM_u_4z7CAdtWZgiLdIO4e_WCVXw4/gviz/tq?gid=' + sheet + '&header=1&range=' + range;

		query = new google.visualization.Query(url);
		query.send(handlePriorityQueryResponse);
	}	

	function handleQuestionQueryResponse(response) {
		// Create the data table.
		if (response.isError()) {
			alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
			return;
		}
		
		var data = response.getDataTable();
		var cols = data.getNumberOfColumns();
		for (var num = 1; num < cols; num++) {
			initElements(data, num);
			drawBarChart(data, num);
		}
	}
	
	function handlePriorityQueryResponse(response) {
		// Create the data table.
		if (response.isError()) {
			alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
			return;
		}
		
		var data = response.getDataTable();
		var cols = data.getNumberOfColumns();
		for (var num = 1; num < cols; num++) {
			initElements(data, num);
			drawColumnChart(data, num);
		}
	}
		
	function initElements(data, num){
		var prefix = 'C-'+data.getColumnLabel(0).substring(0,1) + '-' + data.getNumberOfRows().toString() + '-';
		var container = document.getElementById('container');
		
		var itemRow = document.createElement('div');
		//itemRow.style.borderTop = 'thin dotted #001f3f';
		itemRow.style.marginLeft = '20px';
		container.appendChild(itemRow);
		
		var titleNode = document.createElement('div');
		titleNode.id = prefix + 'title-' + num.toString();
		titleNode.className = 'ss-q-title';
		titleNode.style.marginTop = '20px';
		itemRow.appendChild(titleNode);
		
		var barChart = document.createElement('div');
		barChart.id = prefix + 'bar-chart-' + num.toString();
		var pieChart = document.createElement('div');
		pieChart.id = prefix + 'pie-chart-' + num.toString();
		
		var table = document.createElement('table');
		table.style.borderTop = 'thin solid #001f3f';
		table.style.marginTop = '5px';
		table.style.marginBottom = '20px';
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		cell1.appendChild(barChart);
		var cell2 =  document.createElement('td')
		cell2.appendChild(pieChart);
		row.appendChild(cell1);
		row.appendChild(cell2);
		table.appendChild(row);
		itemRow.appendChild(table);

	}
		
	// Instantiates the chart, passes in the data and draws it.
		
	function drawBarChart(data, num) {	
		// Set the colors of the bars
		var colors = ['#0074D9', '#3D9970', '#2ECC40', '#FF851B', '#FF4136'];
		data.addColumn( {type: 'string', role: 'style'} );
		var lastIndex = data.getNumberOfColumns()-1;
		for (var i=0; i<5; i++) {
			data.setCell(i, lastIndex, colors[i]);
		}
		
		var view = new google.visualization.DataView(data);
		view.setColumns([0, num, { calc: "stringify",
                         sourceColumn: num,
                         type: "string",
                         role: "annotation" }, lastIndex]);
		
		var prefix = 'C-'+data.getColumnLabel(0).substring(0,1) + '-' + data.getNumberOfRows().toString() + '-';
		var barChart = new google.visualization.BarChart(document.getElementById(prefix + 'bar-chart-'+num.toString()));
		var barChartOptions = {
			width: 600,
			height: 400,
			//title: data.getColumnLabel(1),
			legend: 'none'
		};
		barChart.draw(view, barChartOptions);
		
		var pieChart = new google.visualization.PieChart(document.getElementById(prefix + 'pie-chart-'+num.toString()));
		var pieChartOptions = {
			width: 500,
			height: 400,
			//title: data.getColumnLabel(1),
			legend: 'right',
			slices: { 0: { color:colors[0]}, 1: {color:colors[1]}, 2: {color:colors[2]}, 3:{color:colors[3]}, 4: {color:colors[4]} }
		};
		pieChart.draw(view, pieChartOptions);
		
		document.getElementById('title-'+num).textContent = data.getColumnLabel(num); 
	}
		
	function drawColumnChart(data, num) {	
		// Set the colors of the bars
		data.sort({column: num, desc: true});
		var colors = ['#0074D9', '#3D9970', '#2ECC40', '#FF851B', '#FF4136', '#01FF70', '#B10DC9', '#85144b', '#7FDBFF', '#AAAAAA'];

		var view = new google.visualization.DataView(data);
		var row = 0;
		cellColor = function() {return colors[row++]};
		view.setColumns([0, num, { calc: "stringify",
                         sourceColumn: num,
                         type: "string",
                         role: "annotation" }, 
						 { calc: cellColor,
                         sourceColumn: num,
                         type: "string",
                         role: "style" }]);
		
		var prefix = 'C-'+data.getColumnLabel(0).substring(0,1) + '-' + data.getNumberOfRows().toString() + '-';
		var columnChart = new google.visualization.ColumnChart(document.getElementById(prefix + 'bar-chart-'+num.toString()));
		var columnChartOptions = {
			width: 600,
			height: 600,
			chartArea: {left:200,top:20,width:'62%',height:'62%'},
			legend: 'none',
			hAxis: {
				maxTextLines: 2,
				textStyle: {
					color: 'black',
					fontName: 'Arial',
					fontSize: 12,
					bold: false,
					italic: true
				}
			},
			vAxis: {title: 'Number of people'}
		};
		columnChart.draw(view, columnChartOptions);
		
		var pieChart = new google.visualization.PieChart(document.getElementById(prefix + 'pie-chart-'+num.toString()));
		var pieChartOptions = {
			width: 500,
			height: 600,
			pieHole: 0.3,
			chartArea: {left:20,top:0,width:'90%',height:'80%'},
			legend: {
				position: 'right',
				alignment: 'center'
			},
			slices: { 0: { color:colors[0]}, 1: {color:colors[1]}, 2: {color:colors[2]}, 3:{color:colors[3]}, 4: {color:colors[4]},
					  5: { color:colors[5]}, 6: {color:colors[6]}, 7: {color:colors[7]}, 8:{color:colors[8]}, 9: {color:colors[9]}}
		};
		pieChart.draw(view, pieChartOptions);
		
		
		
		var pretext = data.getColumnLabel(0) + ' ';
		document.getElementById(prefix + 'title-'+num).textContent = pretext + data.getColumnLabel(num); 
	}
    </script>
  </head>

  <body>
	  <div class='ss-form-title'>
		  CBCS Employee Survey 2015
	  </div>
	  <!--div class='ss-menu'>
		  <ul>
			  <li onclick='layoutReport(0);'>All</li>
			  <li onclick='layoutReport(1);'>Upper School</li>
			  <li onclick='layoutReport(2);'>Grammar School</li>
			  <li onclick='layoutReport(3);'>Early Childhood</li>
			  <li onclick='layoutReport(4);'>Staff</li>
			  <li onclick='layoutReport(5);'>Dept. Head/Principal</li>
		  </ul>
	  </div -->
    <!--Div that will hold the chart-->
	  <div id="container"></div>
  </body>
</html>